<template>
	<view class="otherDate">
		<view class="head_box flex">
			<view class="">
				<uni-datetime-picker type="date" :clear-icon="false" :border="false" :value="single" @change="change" />
			</view>
			<view @click="search" class="search_box s24 family f500 txtali">
				搜索
			</view>
		</view>
		<view class="list_box">
			<view v-if="teacherList.length==0" style="font-size: 24rpx;color: #ccc;text-align: center;padding-top: 30rpx;">
				暂无数据!
			</view>
			<view class="list_schedule flexjus" v-for="(item,index) in teacherList" :key="index">
				<view class="left_box flex" style="flex: 1;">
					<view class="avatar_box">
						<image class="w100 h100" :src="item.image_src" mode=""></image>
					</view>
					<view class="name_detail_box" style="flex: 1;">
						<view class="name_txt s32 family f500">
							{{item.name}}
						</view>
						<view class="detail_txt s24 familythree f400">
							{{item.t_type}}
						</view>
					</view>
				</view>
				<view class="right_box">
					<view class="schedule_txt s24 familythree f400" v-if="item.day_type==1">
						有档期
					</view>
					<view class="schedule_txt_no s24 familythree f400" v-else>
						无档期
					</view>
					<view class="see_detail flex" @click="goSchedule(item)" style="margin-left: 10rpx;">
						<view class="detail_txt_see s24 familythree f400">
							查看详情
						</view>
						<view class="right_jian">
							<image class="w100 h100" :src="icon.detailJianIcon" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				teacherType:0,
				shopId:0,
				single: "",
				page:1,
				lastPage:0,
				teacherList:[],
			}
		},
		computed: {
			...mapState(['icon'])
		},
		onLoad(options) {
			this.shopId = options.shopId;
			this.teacherType = options.teacherType;
		},
		onShow() {
			this.page = 1;
			this.getTeacherList();
		},
		onReachBottom() {
			if (this.page >= this.lastPage) {
				this.$wanlshop.msg('我是有底线的!')
			} else {
				this.page++;
				this.getTeacherList();
			}
		},
		methods: {
			getTeacherList(){
				this.$request({
					url: 'wedding/worker_appointment_worker',
					method: 'POST',
					data: {
						shop_id: this.shopId,
						type: this.teacherType+1,//1摄影 2化妆
						// type_id:0,
						time:this.single,//档期，
						user_id:uni.getStorageSync('userInfo').id ? uni.getStorageSync('userInfo').id : 0,
						page:this.page
					},
				}).then(res => {
					if(this.page==1){
						this.teacherList = res.data.data.data;
					}else {
						this.teacherList.push(...res.data.data.data);
					}
					this.lastPage = res.data.data.last_page;
				})
			},
			change(e) {
				this.single = e;
			},
			search(){
				this.page=1;
				this.getTeacherList();
			},
			goSchedule(item) {
				uni.navigateTo({
					url: './lookSchedule?teacherId='+item.id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.otherDate {
		overflow: hidden;

		.head_box {
			margin-top: 60upx;
			padding: 0 32upx 0 32upx;
			.date_box {
				border-radius: 58upx;
				overflow: hidden;
			}
			/deep/ .uni-date-x--border {
				height: 50upx;
				border-radius: 58upx;
			}
			/deep/ .uni-date-single {
				width: 250upx;
				height: 50upx;
				background-color: #F3F3F3;
				border-radius: 58upx;
			}
			.search_box {
				width: 104upx;
				height: 50upx;
				background: linear-gradient(154deg, #E4B77F 0%, #CD9C61 100%);
				border-radius: 25upx;
				color: #FFFFFF;
				line-height: 50upx;
				margin-left: 20upx;
			}
		}
		.list_box {
			margin-top: 66upx;
			.list_schedule {
				width: 686upx;
				margin: 0 auto;
				padding: 28upx 0 28upx 0;
				box-sizing: border-box;
				border-bottom: 1upx solid #F4F4F4;
				.avatar_box {
					width: 98upx;
					height: 98upx;
					border-radius: 8upx;
					background-color: #999;
				}
				.name_detail_box {
					margin-left: 20upx;
					.name_txt {
						color: #000;
					}
					.detail_txt {
						color: #999;
						margin-top: 16upx;
						display: -webkit-box;
						overflow: hidden;
						white-space: normal;
						text-overflow: ellipsis;
						word-wrap: break-word;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
					}
				}
				.schedule_txt {
					color: #5A99DE;
					text-align: right;
				}
				.schedule_txt_no {
					color: #333333;
					text-align: right;
				}
				.see_detail {
					margin-top: 26upx;
					.detail_txt_see {
						color: #999;
					}
					.right_jian {
						width: 24upx;
						height: 24upx;
						margin-top: -4upx;
					}
				}
			}
		}
	}
</style>
